import React from 'react';
import G2,{Chart } from '@antv/g2';

class SampleChart extends React.Component {
    constructor(props) {
        super(props);
        this.containerRef = React.createRef();
    }

    //组件生命周期方法之一，在组件被添加到真实文档后触发
    componentDidMount() {
        this.chart = new Chart({
            container: this.containerRef.current,
            width: 450,
            height: 300,
        });
        this.refreshChart();
    }
    // 监听组件更新事件，更新时重新画图。
    //当前的 data 没有变化我们图表当然不需要重新绘制
    componentDidUpdate(prevProps) {
        if (prevProps.data !== this.props.data) {
            this.refreshChart();
        }
    }
    //如果这个组件不再被使用，那么初始化的图表也应该随着组件一并被销毁
    //监听卸载事件
    componentWillUnmount() {
        if (this.chart) {
            this.chart.destroy();
        }
    }

    refreshChart = () => {
        this.chart.source(this.props.data);
        // 此处为硬编码，配置源自 G2 官方示例： https://github.com/antvis/g2
        // 实际开发中需要封装，推荐直接使用 BizCharts。
        this.chart.interval().position('genre*sold').color('genre');
        this.chart.render();
    }

    render() {
        return (
            <div ref={this.containerRef}></div>
        )
    }
}

export default SampleChart;
